/* CSS Document */

article
{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;
}

article td, article th
{
	padding: 2%;
	background-color: #06F;
}

article tr
{
	border-top-style: solid;
	border-top-width: 5px;
	border-top-color: #222;
}

#filmtitel, #beschrijving, #dag, #zaal, #acteur2
{
	border-right-style: solid;
	border-right-width: 5px;
	border-right-color: #222;
}

#filmtitel
{
	font-size: 2em;
	width: 85%;
	background-color: #339;
}

#jaar
{
	font-size: 2em;
	text-align: center;
	width: 15%;
	background-color: #339;
}

#beschrijving
{
	font-size: 1.5em;
	line-height: normal;
	width: 75%;
	background-color: #0099FF;
}

#regisseur
{
	font-size: 1.5em;
	width: 25%;
	background-color: #600;
}

#dag, #zaal
{
	font-size: 1.5em;
	width: 12.5%;
	text-align: center;
}

#dag
{
	background-color: #FFC200;
}

#zaal
{
	background-color: #090;
}

.groter
{
	font-size: 2.5em;
}

#uur
{
	font-size: 2em;
	text-align: center;
	width: 12.5%;
	background-color: #882D60;
}

#trailer_td
{
	padding: 0;
	cursor: pointer;
	background-color: #A00;
}

#acteur2
{
	font-size: 1.5em;
	background-color: #039;
}

#trailer
{
}

#trailer_div
{
	padding: 8%;
	font-size: 2em;
	text-align: center;
	width: auto;
	height:auto;
}

#trailer_td:hover
{
	background-color: #F64A4A;
}

/*css voor trailer*/
#video
{
	background-color: #000;
	display: none;
}

#video button
{
	background-color: #900;
	border: none;
	color: #FFF;
	font-weight: bolder;
	padding: 5px;
	float: right;
}

#video button:hover
{
	background-color: red;
}

#video iframe
{
	width: 100%;
	height: 100%;
}

@media only screen and (min-width:1331px) and (max-width:1497px)
{
	article th, #jaar, #uur, #trailer_div
	{
		font-size: 1.5em;
	}
	
	#dag
	{
		font-size: 1.25em;
	}
}

@media only screen and (min-width:1131px) and (max-width:1330px)
{
	article th, #jaar, #uur, #trailer_div
	{
		font-size: 1.5em;
	}
	
	#dag
	{
		font-size: 1em;
	}
	
	#zaal
	{
		font-size: 1.25em;
	}
}

@media only screen and (min-width:1056px) and (max-width:1130px)
{
	article th, #jaar, #trailer_div
	{
		font-size: 1.5em;
	}
	
	#zaal
	{
		font-size: 1.25em;
	}
	
	#dag
	{
		font-size: 1em;
	}
	
	#uur
	{
		font-size: 1.25em;
	}
}

@media only screen and (min-width:840px) and (max-width:1055px)
{
	article th, #jaar, #trailer_div
	{
		font-size: 1.5em;
	}
	
	#zaal
	{
		font-size: 1.25em;
	}
	
	#dag
	{
		font-size: 1em;
	}
	
	#uur
	{
		font-size: 1.25em;
	}
	
	article
	{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		/*margin-top: 2em;
		margin-bottom: 2em;*/
	}
	
/*	#inhoud
	{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}*/
	
}

@media only screen and (min-width:721px) and (max-width:839px)
{
	article th, #jaar, #trailer_div
	{
		font-size: 1.5em;
	}
	
	#zaal
	{
		font-size: 1em;
	}
	
	#dag
	{
		font-size: 0.75em;
	}
	
	#uur
	{
		font-size: 1.25em;
	}
	
	article
	{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		/*margin-top: 2em;
		margin-bottom: 2em;*/
	}
	
	#inhoud
	{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	
}

@media only screen and (min-width:50px) and (max-width:720px)
{
	article
	{
		width: 100%;
		margin-top: 2.5%;
		margin-bottom: 2.5%;
	}
	
	#inhoud
	{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	

	/* was: article table, article thead, article tbody, article th, article td, article tr */
	table * { 
		display: block;
		border:none !important;
	}

	/*was:	#jaar, #beschrijving, #regisseur, #dag, #uur, #zaal, #acteur2, article th*/
	article td, article th
	{
		width: auto !important;
		padding: 20px;
		margin-bottom: 5px;
		text-align:center;
	}

	#beschrijving
	{
		text-align: left;
	}
	
	.groter
	{
		font-size: 1em;
		display:inline;
	}
	
	
/*	#uur, #jaar, #zaal, #dag
	{
		text-align: center;
	}*/
	
/*	#beschrijving, #dag, #zaal, #acteur2
	{
		border: none;
	}*/
	

	
}